<script setup>
import {onMounted, reactive, ref} from "vue";
import {deleted, get, post} from "@/utils/request.js";
import {useRoute} from "vue-router";
import {showNotify, showSuccessToast} from "vant";
import {parseDay, parseMonth} from "@/utils/DateUtil.js";


const route = useRoute()
//params
const id = route.query.id;
const date = new Date();
const currentDate = ref([date.getFullYear(), parseMonth(date.getMonth()), parseDay(date.getDate())]);

let data = reactive({
  process: {
    "id": id,
    "productName": '卡子',
    "productCategory": '',
    "productColor": '',
    "weight": '',
    "purchaser": '',
    "director": '',
    "recordType": '记账',
    "craft": '电镀',
    "bookDate": currentDate.value.join('-'),
  },
  purchasers: [],
  directors: [],
})

// 采购商
const showPurchasers = ref(false);
const onPurchasersConfirm = ({selectedOptions}) => {
  showPurchasers.value = false;
  data.process.purchaser = selectedOptions[0].text;
};
let purchasersColumn = []
get("/api/process/listPurchaser")
    .then(res => {
      data.purchasers = res.data;
      for (const item of res.data) {
        purchasersColumn.push({
          text: item,
          value: item,
        })
      }
    });

// 经办人
const showDirector = ref(false);
const onDirectorsConfirm = ({selectedOptions}) => {
  showDirector.value = false;
  data.process.director = selectedOptions[0].text;
};
let directorColumn = []
get("/api/book/listDirector")
    .then(res => {
      data.directors = res.data;
      for (const item of res.data) {
        directorColumn.push({
          text: item,
          value: item,
        })
      }
    })


const onSubmit = (values) => {
  console.log(values)
  post('/api/process/add', data.process)
      .then(res => {
        if (id != null) {
          showSuccessToast("修改成功");
        } else {
          showSuccessToast("添加成功");
        }
      })

};

const onClickLeft = () => history.back();

onMounted(async () => {
  if(id!=null){
    let res = await get("/api/process/detail/" + id);
    data.process = res.data;
  }

})
const onRefresh=async () => {
  let res = await get("/api/process/detail/" + id);
  data.process = res.data;

}
const showPicker = ref(false);
const dateOnConfirm = ({selectedValues}) => {
  data.process.bookDate = selectedValues.join('-');
  showPicker.value = false;
};
</script>

<template>
  <div id="add-process">
    <div class="title">
      <van-nav-bar :title="id!=null?'修改加工':'新增加工'" left-text="返回" @click-left="onClickLeft"></van-nav-bar>
    </div>
    <div>
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
              v-model="data.process.productName"
              name="产品"
              label="产品"
              placeholder="产品"
              :rules="[{ required: true, message: '产品' }]"
          >
            <template #input>
              <van-radio-group v-model="data.process.productName" direction="horizontal">
                <van-radio name="卡子">卡子</van-radio>
                <van-radio name="钩子">钩子</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
              v-model="data.process.craft"
              name="产品工艺"
              label="产品工艺"
              placeholder="产品工艺"
              :rules="[{ required: true, message: '请填写产品工艺' }]"
          >
            <template #input>
              <van-radio-group v-model="data.process.craft" direction="horizontal">
                <van-radio name="电镀">电镀</van-radio>
                <van-radio name="淬火">淬火</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
              name="拉货"
              label="拉货"
              placeholder="拉货"
              v-model="data.process.weight"
              :rules="[{ required: true, message: '请填写拉货重量' }]"
          >
            <template #extra>
              <span>KG</span>
            </template>
          </van-field>
          <van-field
              name="送货"
              label="送货"
              placeholder="送货"
              v-model="data.process.residualWeight"
              :rules="[{ required: true, message: '请填写送货重量' }]"
          >
            <template #extra>
              <span>KG</span>
            </template>
          </van-field>
          <van-field
              v-model="data.process.purchaser"
              name="加工商"
              label="加工商"
              placeholder="加工商"
              left-icon="contact-o"
              :rules="[{ required: true, message: '请填写加工商' }]"
              @click-right-icon="showPurchasers=true"
          >
            <template #right-icon>
              <van-button type="primary" size="small">选择</van-button>
            </template>
          </van-field>

          <van-field
              v-model="data.process.director"
              name="经办人"
              label="经办人"
              placeholder="经办人"
              left-icon="user-o"
              :rules="[{ required: true, message: '请填写经办人' }]"
              @click-right-icon="showDirector=true"
          >
            <template #right-icon>
              <van-button type="primary" size="small">选择</van-button>
            </template>
          </van-field>
          <van-field
              v-model="data.process.recordType"
              name="记录方式"
              label="记录方式"
              placeholder="记录方式"
              :rules="[{ required: true, message: '请填写记录方式' }]"
          >
            <template #input>
              <van-radio-group v-model="data.process.recordType" direction="horizontal">
                <van-radio name="记账">记账</van-radio>
                <van-radio name="未开票">未开票</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
              v-model="data.process.bookDate"
              name="日期"
              label="日期"
              placeholder="日期"
              :rules="[{ required: true, message: '请填写日期' }]"
              is-link
              readonly
              @click="showPicker = true"

          />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            {{ id != null ? '修改' : '提交' }}
          </van-button>
        </div>
      </van-form>
    </div>
    <div>
      <van-popup v-model:show="showPurchasers" round position="bottom">
        <van-picker
            :columns="purchasersColumn"
            @cancel="showPurchasers = false"
            @confirm="onPurchasersConfirm"
        />
      </van-popup>
      <van-popup v-model:show="showDirector" round position="bottom">
        <van-picker
            :columns="directorColumn"
            @cancel="showDirector = false"
            @confirm="onDirectorsConfirm"
        />
      </van-popup>
      <van-popup v-model:show="showPicker" position="bottom">
        <van-date-picker v-model="currentDate" @confirm="dateOnConfirm" @cancel="showPicker = false"/>
      </van-popup>
    </div>
  </div>
</template>

<style>
.delete-button {
  height: 100%;
}
.details {

}
</style>